// 项目检验
import inspection from './inspection.module.scss'
import { Input, Select, Button, Space, Table, Modal, Form, Row, Col, Radio, DatePicker, DatePickerProps, Popconfirm, message } from 'antd';
import { SearchOutlined, SyncOutlined, DownloadOutlined, UploadOutlined, CloudDownloadOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/lib/table';
import React, { useEffect, ReactNode } from 'react';
import { useState } from 'react'
import { getDate } from '../materialManagement/getDate'
import axios from 'axios';
import { getData } from '../../../../utils/inspectionResult';
import moment from 'moment';

const InspectionItem = () => {
  // 获取表单数据
  const [data, setData] = useState<DataType[]>()
  useEffect(() => {
    getDate('/material/selectCheckoutProject').then(res => {
      setData(res.data.data.listCheckoutProject)
    }).catch(error => console.log(error)
    )
    getcheckway()//获取检验方式下拉数据
    supplier()//获取供方下拉数据
    userselect()//获取用户下拉数据
    materialselect()//获取材料下拉框
    projectqueselect()//获取项目标准值
  }, [])
  // 设置修改表单的数据
  const [addForm] = Form.useForm()
  const [editForm] = Form.useForm();
  // 项目类别
  const [projecttype, setProjecttype] = useState<string>()
  // 供方简称
  const [shortofsupplier, setShortofsupplier] = useState<string>()
  // select选择框
  const { Option } = Select;
  const [terialedittype, setTerialedittype] = useState<string>()

  const materialedittype = (value: { value: string; label: React.ReactNode }) => {
    setTerialedittype(value.value)
  };
  // 查询
  const [group, setGroup] = useState<string>()
  const [groupid, setGroupid] = useState<string>()
  const setgroup = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setGroup(e.target.value)
  }
  const setgroupid = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setGroupid(e.target.value)
  }
  const setprojecttype = (e: any) => {
    setProjecttype(e.target.value)
  }

  const setshortofsupplier = (e: any) => {
    setShortofsupplier(e.target.value)
  }
  const searchval = () => {
    console.log(group, groupid, projecttype, shortofsupplier);
    axios({
      url:'/material/selectCheckoutProject',
      params:{materialsCode:group,checkoutProjectId:groupid,projectStyleName:projecttype,supAbbreviations:shortofsupplier}
    }).then(res=>{
      console.log(res);
    }).catch(error=>{console.log(error);
    })
  }
  // 删除确认按钮
  const confirm = (id: number) => {
    console.log(id);
    axios({
      url: '/material/deleteCheckoutProject',
      params: { checkoutProjectId: id }
    }).then(res => {
      if (res.status === 200) {
        getDate('/material/selectCheckoutProject').then(res => {
          setData(res.data.data.listCheckoutProject)
          message.success('删除成功');
        }).catch(error => console.log(error)
        )
      }
    }).catch(error => console.log(error)
    )
  };
  // 重置
  const resoveval = () => {
    setGroup('')
    setGroupid('')
    setProjecttype('')
    setShortofsupplier('')
  }
  // 表格
  interface DataType {
    checkoutProjectId: number,
    supNumber: string,
    supAbbreviations: string,
    materialsCode: string,
    projectStandardCode: string,
    checkoutContext: string,
    checkoutStandard: string,
    taghtenedInspectionCycle: string,
    checkoutWayId: number,
    updateTime: string,
    userName: string,
  }

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'checkoutProjectId',
      fixed: 'left',
    },
    {
      title: '供方代码',
      dataIndex: 'supNumber',
    },
    {
      title: '供方简称',
      dataIndex: 'supAbbreviations',
    },
    {
      title: '物料编码',
      dataIndex: 'materialsCode',
    }
    ,
    {
      title: '检验项目代号',
      dataIndex: 'projectStandardCode',
    },
    {
      title: '检验项目',
      dataIndex: 'checkoutContext',
    },
    {
      title: '检验标准',
      dataIndex: 'checkoutStandard',
    },
    {
      title: '检验类型',
      dataIndex: 'projectStyleName',
    },
    {
      title: '检验方式',
      dataIndex: 'checkoutWayId',
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
    },
    {
      title: '维护人',
      dataIndex: 'userName',
    },
    {
      title: '操作',
      key: 'Operation',
      fixed: 'right',
      width: 120,
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => { setLasttime(record.updateTime); seteditIsModalVisible(true); editForm.setFieldsValue(record) }}>编辑</a>
          <Popconfirm
            title="确认删除嘛?"
            onConfirm={() => { confirm(record.checkoutProjectId) }}
            okText="确认"
            cancelText="取消"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  // 获取材料下拉框
  const [materialname, setMaterialname] = useState([])
  const materialselect = () => {
    getDate('/material/selectMaterials').then(res => {
      console.log('获取材料下拉框');
      let cc: any = []
      cc = res.data.data.listMaterials;
      cc = cc.map((item: { materialsId: number; materialsCode: string; }) => {
        return <Option key={item.materialsId} value={item.materialsId}>{item.materialsCode}</Option>
      })
      setMaterialname(cc)
    }).catch(error => console.log(error)
    )
  }
  // 获取项目标准下拉框
  const [projectque, setProjectque] = useState([])
  const projectqueselect = () => {
    getDate('/material/selectProjectStandard').then(res => {
      console.log('获取到项目标准值');
      let cc: any = []
      cc = res.data.data.listProjectStandard;
      cc = cc.map((item: { projectStandardId: number; projectStyleId: number; projectStyleName: string; }) => {
        return <Option key={item.projectStandardId} value={item.projectStyleId}>{item.projectStyleName}</Option>
      })
      setProjectque(cc)
    }).catch(error => {
      console.log(error);
    })
  }
  // 获取检验方式下拉框
  const [chechway, setCheckway] = useState([])
  const getcheckway = () => {
    console.log('检验方式');
    let cc: any = []
    getDate('/material/selectCheckoutWay').then(res => {
      cc = res.data.data;
      cc = cc.map((item: { checkoutWayId: number; checkoutWayName: string; }) => {
        return <Option key={item.checkoutWayId} value={item.checkoutWayId}>{item.checkoutWayName}</Option>
      })
      setCheckway(cc)
    }).catch(error => console.log(error)
    )
  }
  // 获取供方id
  const [supplie, setSupplie] = useState([])
  const supplier = () => {
    getDate('/material/selectSupplier').then(res => {
      console.log('供方id');
      let cc: any = []
      cc = res.data.data.listSupplier
      cc = cc.map((item: { supId: number; supName: string; }) => {
        return <Option key={item.supId} value={item.supId}>{item.supName}</Option>
      })
      setSupplie(cc)

    }).catch(error => console.log(error)
    )
  }
  //  获取用户
  const [username, setUsername] = useState([])
  const userselect = () => {
    getDate('/examine/findUser').then(res => {
      console.log('获取用户数据');
      console.log(res);
      let cc: any = []
      cc = res.data.data
      cc = cc.map((item: { userId: number; userName: string; }) => {
        return <Option key={item.userId} value={item.userId}>{item.userName}</Option>
      })
      setUsername(cc)
    }).catch(error => console.log(error)
    )
  }
  // 模态框
  const [iseditModalVisible, seteditIsModalVisible] = useState(false);
  const [isaddModalVisible, setaddIsModalVisible] = useState(false);
  // 新增
  const addtable = () => {
    addForm.resetFields()
    setaddIsModalVisible(true)
  }

  const handleaddOk = () => {
    setaddIsModalVisible(false);
    console.log(addForm.getFieldsValue());
    axios({
      url: '/material/addCheckoutProject',
      method: 'post',
      data: { ...addForm.getFieldsValue(), updateTime: lasttime }
    }).then(res => {
      console.log(res);
    }).catch(error => {
      console.log(error);
    })
  };
  const handleaddCancel = () => {
    setaddIsModalVisible(false);
  };
  // 修改
  const handleeditOk = () => {
    seteditIsModalVisible(false);
    console.log(editForm.getFieldsValue());
    axios({
      url: '/material/updateCheckoutProject',
      method: 'post',
      data: { ...editForm.getFieldsValue(), updateTime: lasttime }
    }).then(res => {
      console.log(res);
      if (res.status === 200) {
        getDate('/material/selectCheckoutProject').then(res => {
          console.log(res.data.data.listCheckoutProject);
          setData(res.data.data.listCheckoutProject)
        }).catch(error => console.log(error)
        )
      }
    }).catch(error => console.log(error)
    )
  };

  const handleeditCancel = () => {
    seteditIsModalVisible(false);
  };
  // 上次次型式时间
  const [lasttime, setLasttime] = useState<string>()
  // 上次次型式时间
  const timeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    setLasttime(dateString)
  };
  const onlasttimeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
  };
  // 下次型式时间
  const onnexttimeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
  };
  return <div className={inspection.box}>
    {/* 查询 */}
    <div>
      <label htmlFor="">物料编码：</label>
      <Input onChange={setgroup} value={group} className={inspection.ipt} style={{ width: 150 }} placeholder="" />
      <label htmlFor="">检验项目：</label>
      <Input onChange={setgroupid} value={groupid} className={inspection.ipt} style={{ width: 150 }} placeholder="" />
      <label htmlFor="">项目类别：</label>
      <Input onChange={setprojecttype} value={projecttype} className={inspection.ipt} style={{ width: 150 }} placeholder="" />
      <label htmlFor="">供方简称：</label>
      <Input onChange={setshortofsupplier} value={shortofsupplier} className={inspection.ipt} style={{ width: 150 }} placeholder="" />
      <Button onClick={() => { searchval() }} type="primary" ghost icon={<SearchOutlined />}>查询</Button>
      <Button onClick={() => { resoveval() }} style={{ marginLeft: 20, color: '#ffc069', border: '1px solid #ffc069' }} icon={<SyncOutlined style={{ color: '#ffc069' }} />}>重置</Button>
    </div>
    {/* 新增按钮 */}
    <div className={inspection.add}>
      <Button onClick={() => { addtable() }} className={inspection.btl} type="primary" size={'small'}>
        +新增
      </Button>
      <Button className={inspection.btl} icon={<DownloadOutlined />} type="primary" size={'small'}>
        导入
      </Button>
      <Button className={inspection.btl} icon={<UploadOutlined />} type="primary" size={'small'}>
        导出
      </Button>
      <Button icon={<CloudDownloadOutlined />} type="primary" size={'small'}>
        模板下载
      </Button>
    </div>
    <Table rowKey={(record) => { return record.checkoutProjectId }} pagination={{ showQuickJumper: true, defaultPageSize: 2, showTotal: (total, range) => `共 ${total} 条`, position: ["bottomCenter"] }} scroll={{ x: 1400 }} columns={columns} dataSource={data} />
    {/* 修改模态框 */}
    <div>
      <Modal width='800px' title="物料修改" visible={iseditModalVisible} onOk={handleeditOk} onCancel={handleeditCancel}>
        <Form
          form={editForm}
          name="basic"
          labelCol={{
            span: 6,
          }}
          wrapperCol={{
            span: 16,
          }}
          autoComplete="off"
          initialValues={{ value: '请选择类型', label: '请选择类型' }}
        >
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="序号"
                name={"checkoutProjectId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>


            </Col>
            <Col span='12'>
              <Form.Item
                label="检验项目ID"
                name={"checkoutProjectId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row >
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="检验标准"
                name={"checkoutStandard"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>

            </Col>
            <Col span='12'>
              <Form.Item
                label="检验方式"
                name={"checkoutWayId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Select style={{ width: 150 }} onFocus={getcheckway}>
                  {chechway}
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="材料编码"
                name={"materialsId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Select style={{ width: 150 }} onFocus={materialselect}>
                  {materialname}
                </Select>
              </Form.Item>
            </Col>
            <Col>
              <Form.Item
                label="项目标准id"
                name={"projectStandardId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Select style={{ width: 270 }} onFocus={projectqueselect}>
                  <Option value={1}>常规</Option>
                  <Option value={2}>特殊</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="项目类型"
                name={"projectStyleId"}

                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span='12'>
              <Form.Item
                label="项目类别"
                name={"projectStyleName"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="供方id"
                name={"supId"}

                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Select style={{ width: 150 }} onFocus={supplier}>
                  {supplie}
                </Select>
              </Form.Item>
            </Col>
            <Col span='12'>
              <Form.Item
                label="更新时间"
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <DatePicker onChange={timeChange} defaultValue={moment(lasttime, 'YYYY-MM-DD')} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="用户id"
                name={"userId"}

                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Select style={{ width: 150 }} onFocus={userselect}>
                  {username}
                </Select>
              </Form.Item>
            </Col>
            <Col span='12'>
              <Form.Item
                label="检验内容"
                name={"checkoutContext"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>
    {/* 添加模态框 */}
    <div>
      <Modal width='800px' title="物料新增" visible={isaddModalVisible} onOk={handleaddOk} onCancel={handleaddCancel}>
        <Form
          form={addForm}
          name="basic"
          labelCol={{
            span: 7,
          }}
          wrapperCol={{
            span: 16,
          }}
          autoComplete="off"
          initialValues={{ value: '请选择类型', label: '请选择类型' }}
        >
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="检验标准"
                name={"checkoutStandard"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>

            </Col>
            <Col span='12'>
              <Form.Item
                label="检验方式"
                name={"checkoutWayId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Select style={{ width: 150 }} onFocus={getcheckway}>
                  {chechway}
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="材料编码"
                name={"materialsId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Select style={{ width: 150 }} onFocus={materialselect}>
                  {materialname}
                </Select>
              </Form.Item>
            </Col>
            <Col>
              <Form.Item
                label="项目标准id"
                name={"projectStandardId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Select style={{ width: 270 }} onFocus={projectqueselect}>
                  <Option value={1}>常规</Option>
                  <Option value={2}>特殊</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="项目类型"
                name={"projectStyleId"}

                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span='12'>
              <Form.Item
                label="项目类别"
                name={"projectStyleName"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="供方id"
                name={"supId"}

                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Select style={{ width: 150 }} onFocus={supplier}>
                  {supplie}
                </Select>
              </Form.Item>
            </Col>
            <Col span='12'>
              <Form.Item
                label="更新时间"
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <DatePicker onChange={timeChange}/>
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='12'>
              <Form.Item
                label="用户id"
                name={"userId"}

                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Select style={{ width: 150 }} onFocus={userselect}>
                  {username}
                </Select>
              </Form.Item>
            </Col>
            <Col span='12'>
              <Form.Item
                label="检验内容"
                name={"checkoutContext"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>

  </div>
}

export default InspectionItem
